<template>
  <div>
    {{ person.fisrtname }}
    <input type="text" v-model="person.fisrtname" />
    {{ person.lasttname }}
    <input type="text" v-model="person.lastname" />
    全名：{{ person.fullname }}
    <input type="text" v-model="person.fullname" />
  </div>
</template>
<script setup>
let person = reactive({
  fisrtname: "张",
  lastname: "三",
});
person.fullname = computed({
  get() {
    return person.fisrtname + "_" + person.lastname;
  },
  set(value) {
    let names = value.split("_");
    person.fisrtname = names[0];
    person.lastname = names[1];
  },
});
</script>

<style lang="less" scoped>
body {
  background: #fff;
}
</style>
